<template>

  <!-- 面包屑 -->
  <el-breadcrumb separator="/" style="border-bottom: 1px solid #ccc;padding: 10px 0;margin-bottom:10px ;">
    <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item to="/oms/order"
      >订单</el-breadcrumb-item
    >
    <el-breadcrumb-item>退货原因详情</el-breadcrumb-item>
  </el-breadcrumb>

  <el-steps :active="data.stepData.status" finish-status="success" align-center>
    <el-step title="提交订单" :description="dateFormate(data.stepData.createTime)" />
    <el-step title="支付订单" :description="dateFormate(data.stepData.paymentTime)" />
    <el-step title="平台发货" :description="dateFormate(data.stepData.deliveryTime)" />
    <el-step title="确认收货" :description="dateFormate(data.stepData.receiveTime)" />
    <el-step title="完成评价" :description="dateFormate(data.stepData.commentTime)" />
  </el-steps>
  <el-descriptions :column="1" direction="vertical" border style="margin-top: 20px;">
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
    <template #label>
      <div style="display: flex;justify-content: space-between;height: 45px;align-items: center;">
        <div style="color:#f56c6c">
          <el-icon color="#f56c6c" ><WarningFilled /></el-icon>
          <span style="vertical-align: text-bottom; margin-left: 10px;">当前订单状态:{{ statusEnum[data.stepData.status] }}</span>
        </div>
        <div>
          <el-button size="small" @click="delOrder">删除订单</el-button>
          <el-button size="small" @click="isShow=true">备注订单</el-button>
        </div>
      </div>
    </template>
    <!-- 其他组件 -->
    <OmsBaseInfo :base-info="data.baseInfo"/>
    <OmsReceive :receive="data.recevie"/>
    <OmsGoodsInfo :goods-info="data.goodsInfo"/>
    <OmsAmount :amount="data.amount"/>
    <OmsOperate :operations="data.operation"/>
    </el-descriptions-item>
  </el-descriptions>
  <!-- 备注对话框 -->
  <DetailDialog v-model:isShow="isShow" :id="route.query.id" :status="data.stepData.status"/>
</template>
<script setup lang="ts">
import DetailDialog from "@/components/c-oms/omsDetail/DetailDialog.vue";
import OmsAmount from "@/components/c-oms/omsDetailPlus/OmsAmount.vue";
import OmsBaseInfo from "@/components/c-oms/omsDetailPlus/OmsBaseInfo.vue";
import OmsGoodsInfo from "@/components/c-oms/omsDetailPlus/OmsGoodsInfo.vue";
import OmsOperate from "@/components/c-oms/omsDetailPlus/OmsOperate.vue";
import OmsReceive from "@/components/c-oms/omsDetailPlus/OmsReceive.vue";
import { Order } from "@/request/api";
import * as dayjs from "dayjs";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, ref } from "vue";
import { useRoute } from "vue-router";

let route = useRoute()

let data = reactive({
  // 订单步骤数据
  stepData:{} as any,
  // 基本信息
  baseInfo:{},
  // 收货人信息
  recevie:{},
  // 商品信息
  goodsInfo:[{}] as [{
    productPic:string,
    productName:string,
    productBrand:string,
    productPrice:string,
    // 货号
    productSn:string,
    // 商品属性，json格式，需要转换
    productAttr:string,
    // 数量
    productQuantity:number,
  }],
  // 费用信息
  amount:{} as {
    totalAmount:number;
    freightAmount:number;
    couponAmount:number;
    integrationAmount:number;
    promotionAmount:number;
    discountAmount:number;
  },
  // 操作信息
  operation:[]
})
// 备注对话框
let isShow = ref(false)
// 订单状态
enum statusEnum{
  "待付款",
  "待发货",
  "已发货",
  "已完成",
  "已关闭"
}
// 删除订单
const delOrder = function(){
  ElMessageBox({
    title:"提示信息",
    type:"warning",
    message:"确定删除订单",
    showCancelButton:true,
    beforeClose:(a,i,done)=>{
      if(a==="confirm"){
        ElMessage.success("删除成功")
      }
      done()
    }
  })
}
// 获取数据
const getDataAPI = async function(){
  let result = await Order.OrderDetailAPI(Number(route.query.id))
  let {createTime,paymentTime,deliveryTime,receiveTime,commentTime,status} = result
  let {orderSn,useIntegration,memberUsername,payType,sourceType,orderType,deliveryCompany,deliverySn,integration,growth,autoConfirmDay,promotionInfo} = result
  let {receiverName,receiverPhone,receiverPostCode,receiverProvince,receiverCity,receiverRegion} = result
  let {totalAmount,freightAmount,couponAmount,integrationAmount,promotionAmount,discountAmount} = result

  // 进度条数据
  data.stepData = {createTime,paymentTime,deliveryTime,receiveTime,commentTime,status}

  // 基本信息数据
  data.baseInfo = {orderSn,useIntegration,memberUsername,payType,sourceType,orderType,deliveryCompany,deliverySn,integration,growth,autoConfirmDay,promotionInfo}

  // 收货人数据
  data.recevie = {receiverName,receiverPhone,receiverPostCode,receiverProvince,receiverCity,receiverRegion}

  // 费用信息数据
  data.amount = {totalAmount,freightAmount,couponAmount,integrationAmount,promotionAmount,discountAmount}

  // 操作记录列表
  data.operation = result.historyList

  // 商品信息列表
  data.goodsInfo = result.orderItemList
}

// 日期格式化
let dateFormate = function(param){
  return param ? dayjs(param).format('YYYY-MM-DD hh:mm:ss') : ""
}

// 创建时发送
getDataAPI()
</script>
<style scoped>
.my-label {
  background: var(--el-color-success-light-9);
}
.my-content {
  background: var(--el-color-danger-light-9);
}
</style>